<script setup>
import { useRouter } from 'vue-router' 
import { deleteNovel } from '@/api/book/index.js'
import { message } from 'ant-design-vue';
const dataList = defineProps({
  dataSource: {
    type: Array,
    default: []
  }
})
const router = useRouter()
// 书籍状态
const bookStatus = [
  { color: 'processing', text: '连载中' }, 
  { color: 'success', text: '已完结' }, 
  { color: 'warning', text: '审核中' }, 
  { color: 'error', text: '审核失败' }
]

  // 声明事件
const emit = defineEmits(['delteNovel'])

// 删除书籍
const handleConfirm = (id) => {
  deleteNovel({ id })
    .then(() => {
      message.success('删除成功')
      emit('delteNovel')
    })
    .catch(err => {
      message.error( err || '删除失败')
    })
}

// 上传章节
const uploadChapter = (title, no, id) => {
  router.push({path: '/book/chapter/upload', query: { title, chapter: no + 1, novelId: id} })
}
// 进入详情
const handleDetail = (title, chapter, novelId) => router.push({ path: 'book-manage/manage/detail', query: { title, chapter, novelId } })
</script>
<template>
  <div class="book" v-for="book in dataSource" :key="book.id">
    <div class="cover">
      <img :src="book.cover" alt="" @click="() => handleDetail(book.title,book.chapterNums + 1, book.id)">
    </div>
    <div class="info">
      <div class="title"> 
        <span>{{ book.title }}</span>
        <a-tag :color="bookStatus[book.status].color">{{ bookStatus[book.status].text }}</a-tag>
      </div>
      <div class="sub"><span>订阅数:</span> {{ book.subscribeNums }}</div>
      <div class="wrapper">
        <div class="account"><span>作品字数:</span>{{ book.wordNums }}</div>
        <div class="extra">
          <a-button type="link" @click="() => uploadChapter(book.title, book.chapterNums, book.id)">上传章节</a-button>
          <a-button type="link"  @click="() => handleDetail(book.title,book.chapterNums + 1, book.id)">管理</a-button>
          <a-popconfirm
            title="你真的要删除这本书吗"
            ok-text="确认"
            cancel-text="取消"
            @confirm="() => handleConfirm(book.id)"
          >
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.book {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  padding: 24px 0;
  .cover {
    width: 94px;
    img {
      width: 94px;
      height: 124px;
    }
  }
  .info {
    flex: 1;
    padding-left: 10px;
    height: 124px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      span {
        margin-right: 10px;
        font-weight: 600;
      }
    }
    .sub {
      span {
        margin-right: 10px;
      }
    }
    .wrapper {
      display: flex;
      justify-content: space-between;
      .account {
        line-height: 32px;
        span {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>